<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
</head>

<body>
    <div id="app">
        <one></one>
        <two></two>
    </div>
    <script>
        Vue.directive("mycolor",{
            inserted(el,binding){
                el.style.color=binding.value;
            }
        });

        Vue.component("one", {
            template: `
                    <div>
                        <div>{{time | fmtTime(time)}}</div>
<input type="text" v-mycolor="color">
                    </div>
                `,
            data() {
                return {
                    time: new Date(),
                    color:"red"
                }
            },
            filters: {
                fmtTime(time) {
                    var y = time.getFullYear();
                    var m = time.getMonth();
                    var d = time.getDate();
                    return y + "/" + m + "/" +d;
                }
            }
        });

        Vue.component("two", {
            template: `
                <div>
                    <div>{{time}}</div>
                    <input type="text" v-myfocus v-mycolor="color">
                </div>
            `,
            data() {
                return {
                    time: new Date(),
                    color:"red"
                }
            },
            directives:{
                myfocus:{
                    inserted(el,binding){ 
                        console.log(el,22222);
                        el.focus()
                        //el.style.color=binding.value
                    }
                } 
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>